<template>
    <div :class="className" class="com-flex border">
      <div class="com-title"  @click="handleJumpPath()">{{ title }}{{ titleNumber }}</div>
      <div class="com-chart">
        <slot />
      </div>
      <span class="line1"></span>
      <span class="line2"></span>
      <span class="line3"></span>
      <span class="line4"></span>
    </div>
  </template>
  
  <script setup>

const router = useRouter();
  const props = defineProps({
    className: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "com-flex",
    },
    titleNumber: {
      type: [String, Number],
      default: "com-flex",
    },
    // 跳转路径
    jumpPath:{
      type: String,
      default: "",
    }
  });

function handleJumpPath(){
    router.push(props.jumpPath)
}


  </script>
  
  <style lang="scss" scoped>
  .com-flex {
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #66b6fe;
  }
  .com-chart {
    flex-grow: 1;
  }
  .com-title {
    width: 100%;
    height: 34px;
    font-size: 16px;
    line-height: 34px;
    text-align: center;
    color: "#313131";
    font-weight: 600;
    background-color: #4e99e0;
    text-align: center;
  }
  .line1 {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 0px;
    height: 0px;
    border-left: 0px solid #66b6fe;
    border-top: 0px solid #66b6fe;
    transition: all 0.8s;
  }
  .line2 {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 0px;
    height: 0px;
    border-right: 0px solid #66b6fe;
    border-top: 0px solid #66b6fe;
    transition: all 0.8s;
  }
  .line3 {
    position: absolute;
    bottom: -2px;
    left: -2px;
    width: 33px;
    height: 33px;
    border-left: 4px solid #66b6fe;
    border-bottom: 4px solid #66b6fe;
    transition: all 0.8s;
  }
  .line4 {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 33px;
    height: 33px;
    border-right: 4px solid #66b6fe;
    border-bottom: 4px solid #66b6fe;
    transition: all 0.8s;
  }
  .com-flex:hover .line1 {
    border-left: 4px solid #66b6fe;
    border-top: 4px solid #66b6fe;
    width: calc(100% + 2px);
    height: 0;
  }
  .com-flex:hover .line2 {
    border-right: 4px solid #66b6fe;
    border-top: 4px solid #66b6fe;
    width: 0;
    height: calc(100% + 2px);
  }
  .com-flex:hover .line3 {
    width: 0;
    height: calc(100% + 2px);;
  }
  .com-flex:hover .line4 {
    width: calc(100% + 2px);
    height: 0;
  }
  .com-flex:hover {
    background-color: rgba($color: #000000, $alpha: 0.2);
  }
  .com-flex:hover .com-title {
    background-color: lighten($color: #4e99e0, $amount: 20%);
  }
  </style>
  